<template>
  <div class="h-1/1 p-20px box-border">
    <el-image :src="userInfo.prefix + props.initParams.cover" class="w-1/1 h-200px">
      <template #error>
        <div
          @click="openSuCai"
          class="flex flex-col h-1/1 justify-center border-dashed border border-2px border-[var(--el-color-primary-light-5] cursor-pointer"
        >
          <div class="text-center">
            <el-icon size="32" color="var(--el-color-primary-light-7)">
              <Plus />
            </el-icon>
          </div>
          <div class="text-center">选择文章封面</div>
        </div>
      </template>
    </el-image>
    <div class="h-24px">
      <el-button link type="primary" @click="openSuCai" v-if="props.initParams.cover">重新选择</el-button>
    </div>
    <div class="mt-20px">
      <div class="text-14px mb-20px">选择分类</div>
      <el-radio-group v-model="radios">
        <el-radio
          v-for="(p, index) in groupList"
          border
          :key="index"
          :model-value="p.id"
          :label="p.name"
          class="mr-10px mb-10px"
          @change="changeGroup"
          size="small"
        ></el-radio>
      </el-radio-group>
    </div>
    <div class="mt-20px">
      <el-button @click="publish" type="primary" :disabled="!props.initParams.cover || !radios">发表</el-button>
    </div>
    <SuCaiPopup ref="suCaiRef" mode="select" filter="image" @get-url="getUrl"></SuCaiPopup>
  </div>
</template>

<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import SuCaiPopup from "@/components/sucaiPopup/index.vue";
import { watch, onMounted, ref } from "vue";
import { ArticleGroup } from "@/api/interface/article";
import { useRoute } from "vue-router";
import { useUserStore } from "@/stores/modules/user";

const { userInfo } = useUserStore();

const route = useRoute();

interface InitParams {
  cover: string;
  group: number;
}

interface Props {
  groupApi?: () => Promise<any>;
  initParams: InitParams;
}

const props = withDefaults(defineProps<Props>(), {
  initParams: () => {
    return { cover: "", group: 0 };
  }
});

const emits = defineEmits(["submit"]);

const suCaiRef = ref<InstanceType<typeof SuCaiPopup> | null>();

const radios = ref("");

const groupList = ref<ArticleGroup.Option[]>([]);

const openSuCai = async () => {
  suCaiRef.value?.acceptParams();
};

watch(
  () => props.initParams,
  async () => {
    if (route.query.id) {
      const { data } = await props.groupApi!();
      groupList.value = data;
    }
    // 设置当前选择
    const index = groupList.value.findIndex(e => e.id === props.initParams.group);
    if (index !== -1) {
      radios.value = groupList.value[index].name;
    }
  },
  { deep: true }
);

onMounted(async () => {
  if (!route.query.id) {
    const { data } = await props.groupApi!();
    groupList.value = data;
  }
});

const getUrl = (val: any) => {
  props.initParams.cover = val.url;
  suCaiRef.value?.close();
};

const changeGroup = (p: any) => {
  const index = groupList.value.findIndex((e: ArticleGroup.Option) => e.name === p);
  props.initParams.group = groupList.value[index].id as number;
};

const publish = () => {
  emits("submit", props.initParams);
};
</script>

<style></style>
